<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
      <!--<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Box Settings</h4>
          </div>
          <div class="modal-body">
            Here goes box setting content.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
          </div>
        </div>
        </div>-->
      <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
      <div class="container">
        <div class="row">
          <div id="content" class="col-lg-12">
            <!-- PAGE HEADER-->
            <div class="row">
              <div class="col-sm-12">
                <div class="page-header">
                  <!-- STYLER -->
                  
                  <!-- /STYLER -->
                  <!-- BREADCRUMBS -->
                  <ul class="breadcrumb">
                    <div class="alert alert-info">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        Xin chào <strong><?php echo $this->session->userdata('username');?></strong>! Tài khoản của bạn còn ???? ngày nữa.
                    </div>
                  <!-- /BREADCRUMBS -->
                  <div class="clearfix">
                    <h3 class="content-title pull-left">Trang chủ khảo sát</h3>
                    <!-- DATE RANGE PICKER -->
                    <span class="date-range pull-right">
                      <div class="btn-group">
                        <a class="js_update btn btn-default" href="#">Hôm nay</a>
                        <a class="js_update btn btn-default" href="#">7 ngày trước</a>
                        <a class="js_update btn btn-default hidden-xs" href="#">Tháng trước</a>
                        
                        <a id="reportrange" class="btn reportrange">
                          <i class="fa fa-calendar"></i>
                          <span></span>
                          <i class="fa fa-angle-down"></i>
                        </a>
                      </div>
                    </span>
                    <!-- /DATE RANGE PICKER -->
                  </div>
                  <div class="description">Tổng quan, thống kê và ...</div>
                </div>
              </div>
            </div>
            <!-- /PAGE HEADER -->
            <!-- DASHBOARD CONTENT -->
            <div class="row">
              <!-- COLUMN 1 -->
              <div class="col-md-6">
                <div class="row">
                  <div class="col-sm-12 col-md-6">
                   <div class="dashbox panel panel-default">
                    <div class="panel-body">
                       <div class="content red">
                        <span class="sparkline" data-color="white">1,4,3,5,6</span>
                       </div>
                       <div class="header">New Orders</div>
                       <div class="number">6 412</div>
                    </div>
                    
                   </div>
                  </div>
                  <div class="col-sm-12 col-md-6">
                   <div class="dashbox panel panel-default">
                    <div class="panel-body">
                       <div class="content orange">
                        <div class="sparkline" data-color="white">24,25,27,29,14,26,20,8,12</div>
                       </div>
                       <div class="header">Feedback</div>
                       <div class="number">819</div>
                    </div>
                    
                   </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="quick-pie panel panel-default">
                      <div class="panel-body">
                        <div class="col-md-4 text-center">
                          <div id="dash_pie_1" class="piechart" data-percent="59">
                            <span class="percent"></span>
                          </div>
                          <a href="#" class="title">New Visitors <i class="fa fa-angle-right"></i></a>
                        </div>
                        <div class="col-md-4 text-center">
                          <div id="dash_pie_2" class="piechart" data-percent="73">
                            <span class="percent"></span>
                          </div>
                          <a href="#" class="title">Bounce Rate <i class="fa fa-angle-right"></i></a>
                        </div>
                        <div class="col-md-4 text-center">
                          <div id="dash_pie_3" class="piechart" data-percent="90">
                            <span class="percent"></span>
                          </div>
                          <a href="#" class="title">Brand Popularity <i class="fa fa-angle-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                 </div>
              </div>
              <!-- /COLUMN 1 -->
              
              <!-- COLUMN 2 -->
              <div class="col-md-6">
                <div class="box solid grey">
                  <div class="box-title">
                    <h4><i class="fa fa-dollar"></i>Revenue</h4>
                    <div class="tools">
                      <span class="label label-danger">
                        20% <i class="fa fa-arrow-up"></i>
                      </span>
                      <a href="#box-config" data-toggle="modal" class="config">
                        <i class="fa fa-cog"></i>
                      </a>
                      <a href="javascript:;" class="reload">
                        <i class="fa fa-refresh"></i>
                      </a>
                      <a href="javascript:;" class="collapse">
                        <i class="fa fa-chevron-up"></i>
                      </a>
                      <a href="javascript:;" class="remove">
                        <i class="fa fa-times"></i>
                      </a>
                    </div>
                  </div>
                  <div class="box-body">
                    <div id="chart-revenue" style="height:200px"></div>
                  </div>
                </div>
              </div>
              <!-- /COLUMN 2 -->
            </div>
             <!-- /DASHBOARD CONTENT -->
             <!-- HERO GRAPH -->
            <div class="row" style="visibility:hidden;height:1px;">
              <div class="col-md-12">
                <!-- BOX -->
                <div class="box border green">
                  <div class="box-title">
                    <h4><i class="fa fa-reorder"></i>Traffic & Sales</h4>
                  </div>
                  <div class="box-body">
                    <div class="tabbable box-tabs">
                      <ul class="nav nav-tabs">
                         <li><a href="#box_tab2" data-toggle="tab">Select & Zoom Sales Chart</a></li>
                         <li class="active"><a href="#box_tab1" data-toggle="tab">Traffic Statistics</a></li>
                       </ul>
                       <div class="tab-content">
                         <div class="tab-pane active" id="box_tab1">
                          <!-- TAB 1 -->
                          <div id="chart-dash" class="chart"></div>
                          <hr class="margin-bottom-0" />
                          <ul class="stats">
                            <li> <strong>4,853</strong> <small>Total Views</small> </li>
                            <li class="hidden-xs"> <strong>271</strong> <small>Last 24 Hours</small> </li>
                            <li> <strong>1,025</strong> <small>Unique Users</small> </li>
                            <li class="hidden-xs"> <strong>105</strong> <small>Last 24 Hours</small> </li>
                           </ul>
                           <!-- /TAB 1 -->
                         </div>
                         <div class="tab-pane" id="box_tab2">
                          <div class="demo-container">
                            <div id="placeholder" class="demo-placeholder"></div>
                          </div>

                          <div class="demo-container" style="height:100px;">
                            <div id="overview" class="demo-placeholder"></div>
                          </div>
                        </div>
                       </div>
                    </div>
                  </div>
                </div>
                <!-- /BOX -->
              </div>
            </div>
            <!-- /HERO GRAPH -->
            
            <!-- EXPORT TABLES -->
            <div class="row">
              <div class="col-md-12">
                <!-- BOX -->
                <div class="box border purple">
                  <div class="box-title">
                    <h4><i class="fa fa-table"></i>Số dự án khảo sát hiện tại của bạn: <?php echo count($projectInfo);?> dự án</h4>
                    <div class="tools hidden-xs">
                      <a href="#box-config" data-toggle="modal" class="config">
                        <i class="fa fa-cog"></i>
                      </a>
                      <a href="javascript:;" class="reload">
                        <i class="fa fa-refresh"></i>
                      </a>
                      <a href="javascript:;" class="collapse">
                        <i class="fa fa-chevron-up"></i>
                      </a>
                      <a href="javascript:;" class="remove">
                        <i class="fa fa-times"></i>
                      </a>
                    </div>
                  </div>
                  <div class="box-body">
                    <table id="datatable2" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <th width="50%">Tên dự án</th>
                          <th>Người tạo</th>
                          <th class="hidden-xs">Ngày tạo</th>
                          <th class="hidden-xs">Loại</th>
                          <th>Phản hồi</th>
                        </tr>
                      </thead>
                      <tbody>
                        <?php
                          foreach ($projectInfo as $key => $val) { 
                            echo "<tr class='gradeA' id='project".$val['survey_id']."'>";
                            echo "<td class='hov'><a class='survey_name' href='".$val['survey_link']."'><strong>".$val['survey_name']."</strong></a>";
                            echo "<div class='hidd abc123' style='margin-top:5px;'><small><a href='".site_url()."sua-khao-sat/".$val["survey_id"].".ksv'>Sửa</a> | <a href='".site_url()."tao-cau-hoi-khao-sat/".$val["survey_id"].".ksv'>Câu hỏi</a> | <a href='".base_url()."xem-truoc-khao-sat/".$val["survey_id"].".ksv'>Xem trước</a> | <a href=''>Chia sẻ</a> <a href=''>Báo cáo</a> | <a href='' style='color:#f89406;'>Sao chép</a> | <a href='javascript:void(0)' data-id='".$val['survey_id']."' style='color:red;' class='del'>Xóa</a></small></div></td>";
                            echo "<td align='center'>".$val['username']."</td>";
                            echo '<td align="center" class="hidden-xs">'.$val['created_time'].'</td>';
                            echo '<td align="center" class="hidden-xs"><span class="label label-success label-sm">'.$val['type_name'].'</span></td>';
                            echo '<td align="center">...</td>';
                            echo "</tr>"; 
                          }
                        ?>
                      
                      </tbody>
                      <tfoot>
                        <tr>
                          <th width="50%">Tên dự án</th>
                          <th>Người tạo</th>
                          <th class="hidden-xs">Ngày tạo</th>
                          <th class="hidden-xs">Loại</th>
                          <th>Phản hồi</th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
                <!-- /BOX -->
              </div>
            </div>
            <!-- /EXPORT TABLES -->
            <div class="footer-tools">
              <span class="go-top">
                <i class="fa fa-chevron-up"></i> Top
              </span>
            </div>

            <!-- popup-->
            <div id="alert-del" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="width:350px;">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">Xóa dự án</h4>
                    </div>
                    <div class="modal-body">
                        <p>Bạn chắc chắn muốn xóa dự án này?</p>
                    </div>
                    <div class="modal-footer">
                      <a href="javascript:void(0)" data-dismiss="modal" aria-hidden="true" class="btn btn-danger">Không</a>
                      <a href="javascript:void(0)" id="btnYes" class="btn btn-primary">&nbsp;&nbsp;&nbsp;Có&nbsp;&nbsp;&nbsp;</a>
                    </div>
                  </div>
                </div>
            </div>



            <script>
              jQuery(document).ready(function() {   
                App.setPage("home");  //Set current page
                App.init(); //Initialise plugins and elements
                Charts.initCharts();
                Charts.initPieCharts();
              });
            </script>
  <!-- /JAVASCRIPTS -->

  
          